<template>
    <div class="number-box">
        <div>{{ countdown.hours }}</div>
        <span>:</span>
        <div>{{ countdown.minutes }}</div>
        <span>:</span>
        <div>{{ countdown.seconds }}</div>
    </div>
</template>

<script setup>
import { onMounted, ref ,onUnmounted} from 'vue';

const props = defineProps(['delistTime']);
const countdown = ref({
    hours: '00', minutes: '00', seconds: '00'
});
let t;
const getCountdown = (tempTime) => {
    const hours = Math.floor(tempTime / 3600);
    const minutes = Math.floor((tempTime % 3600) / 60);
    const seconds = Math.floor(tempTime % 60);
    countdown.value = {
        hours: hours > 9 ? hours : '0' + hours,
        minutes: minutes > 9 ? minutes : '0' + minutes,
        seconds: seconds > 9 ? seconds : '0' + seconds
    }
}
onMounted(() => {
    const time = props.delistTime;
    const nowTime = new Date().getTime();
    const futureDate = new Date(time).getTime();
    const diff = futureDate - nowTime;// 时间差
    const day = Math.floor(diff / 1000 / 60 / 60 / 24);
    const integer = day * 24 * 60 * 60 * 1000;
    let tempTime = diff > 0 ? (diff - integer) / 1000 : 0;
    if (tempTime > 0) {
        t = setInterval(() => {
            tempTime -= 1;
            getCountdown(tempTime);
            if (tempTime <= 1) {
                clearInterval(t);
            }
        }, 1000);
    }
})
onUnmounted(()=>{
    clearInterval(t);
})
</script>

<style lang="scss" scoped>
.number-box {
    display: flex;

    >div {
        background: white;
        height: 18px;
        width: 18px;
        color: #3D3D3D;
        border-radius: 4px;
        font-size: 12px;
        text-align: center;
        line-height: 18px;
    }

    >span {
        width: 10px;
        text-align: center;

    }
}
</style>